<template>
  <div>
    <el-upload
      ref="upload"
      action=""
      :class="{ hideshow: limit - fileList.length <= 0 }"
      :file-list="fileList"
      :http-request="upimgfn"
      list-type="picture-card"
      :multiple="true"
      :on-preview="handlePictureCardPreview"
      :on-remove="removefn"
      :on-success="onSuccess"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog v-model="dialogVisible">
      <img alt="" :src="dialogImageUrl" style="width: 100%" />
    </el-dialog>
  </div>
</template>
<script>
  import UploadServlet from '@/api/UploadServlet'

  export default {
    props: ['input', 'imgdata'],
    data() {
      return {
        dialogImageUrl: '',
        dialogVisible: false,
        // fileList: [],
        imglist: [],
      }
    },
    computed: {
      fileList() {
        let r = []
        this.input.values.forEach((e) => {
          if (this.imgdata[e]) {
            r.push({ name: this.imgdata[e], url: this.imgdata[e] })
          }
        })
        return r
      },

      limit() {
        let num = 1
        if (this.input.type == 'imgs') {
          num = this.input.values.length
        }
        return num
      },
    },
    watch: {
      imgdata: {
        handler() {
          // this.fileListfn();
        },
        deep: true,
      },
      input: {
        handler() {
          // this.fileListfn();
        },
        deep: true,
      },
      imglist: {
        handler() {
          this.imglistwatchfn()
        },
      },
    },
    mounted() {},
    methods: {
      fileListfn() {
        if (this.input.type == 'imgs') {
          let imginputlist = []
          console.log(this.input.values.length, 999999999)

          this.input.values.forEach((e) => {
            if (this.imgdata[e]) {
              imginputlist.push({ name: this.imgdata[e], url: this.imgdata[e] })
            }
          })
          console.log(imginputlist, 514)
          let edtdata = imginputlist.find((f) => {
            return !this.imglist.find((imgf) => {
              return f.url == imgf.url
            })
          })
          if (!edtdata) {
            return false
          }
          //
          this.fileList = []
          this.input.values.forEach((e) => {
            if (this.imgdata[e]) {
              this.fileList.push({
                name: this.imgdata[e],
                url: this.imgdata[e],
              })
            }
          })
          this.imglist = [...this.fileList]
        }
      },
      imglistwatchfn() {
        if (this.input.type == 'imgs') {
          this.$emit('setimgs', this.input, this.imglist)
        }
      },

      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      onSuccess(response, file, fileList) {
        file.name = response
        file.url = response
        fileList.splice(0, fileList.length - this.limit)
        this.imglist = [...fileList]
      },
      removefn(file, fileList) {
        this.imglist = [...fileList]
      },

      // changefn(file, fileList){
      //     // console.log(file, fileList,"changefn");
      //     // this.imglist = [...fileList]
      // },
      upimgfn(filedata) {
        let file = filedata.file ? filedata.file : filedata

        const isJpgOrPng =
          file.type === 'image/jpeg' || file.type === 'image/png'
        // const isLt2M = file.size / 1024 / 1024 < 2
        if (!isJpgOrPng) {
          this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!')
          return new Promise((resolve, reject) => {
            reject()
          })
        }

        return new Promise((resolve) => {
          UploadServlet(file).then((imgurl) => {
            resolve(imgurl)
          })
        })
      },
    },
  }
</script>
<style lang="scss" scope>
  .el-overlay .el-dialog .el-dialog__body {
    img {
      width: auto;
      max-width: 100%;
    }
  }
  .hideshow .el-upload--picture-card {
    display: none;
  }
  .el-upload--picture-card {
    width: 76px !important;
    height: 76px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: none;
    margin-bottom: 8px;
  }
  .el-upload-list--picture-card {
    display: inline-flex;
    flex-wrap: wrap;
  }
  .el-upload--picture-card i {
    color: #fff;
  }
  .el-upload-list--picture-card .el-upload-list__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
  }
  .el-upload-list--picture-card .el-upload-list__item div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-overlay .el-dialog .el-dialog__body img {
    // max-width: 120px;
    // max-height: 120px;
  }
</style>
